<style lang="less" scoped>

.layout-LoginTableTitle {
    font-size: 23px;
    font-weight: bold;
    color: #666666;
}

</style>

<template>
    <div>
        <el-form ref="form" :model="formInline" :rules="ruleInline">
            <el-divider content-position="left"><span class="layout-LoginTableTitle">管理员登录</span></el-divider>
            <div :style="{height : '10px'}"/>
            <el-row>
                <el-col :push="3">
                    <el-form-item prop="account">
                        <el-input type="text" 
                            @focus="cleanLoginErr()" 
                            v-model="formInline.account" 
                            placeholder="Username"
                            prefix-icon="el-icon-user-solid"
                            style="min-width: 300px;width: auto"/>
                    </el-form-item>
                </el-col>
            </el-row>

            
            <el-row>
                <el-col :push="3">
                    <el-form-item prop="passwd">
                        <el-input type="text" 
                            show-password
                            @focus="cleanLoginErr()" 
                            v-model="formInline.passwd" 
                            placeholder="Password" 
                            prefix-icon="el-icon-lock"
                            style="min-width: 300px;width: auto"/>  
                    </el-form-item>
                </el-col>
            </el-row>
            
            <el-row>
                <el-col :span="12" :push="6">
                    <el-switch v-model="loginCookie" active-text="记住登录状态"/>
                    <div :style="{height : '25px'}"/>
                </el-col>
            </el-row>

            <el-row v-if="loginErr.flg">
                <el-col>
                    <el-alert
                        title="登录失败"
                        type="error"
                        show-ico
                        :closable="false">
                        <span v-text="loginErr.msg"/>
                    </el-alert>
                    <div :style="{height : '25px'}"/>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12" :push="6">
                    <el-button type="primary" style="min-width: 200px;width: auto" @click="handleSubmit('formInline')" round>登录</el-button>
                </el-col>
            </el-row>

            
        </el-form>

    </div>
</template>

<script>
export default {
    name: 'LoginTable',
    props: {
        nextPage : String
    },
    components: {
        
    },
    computed: {
        loginByPasswordURL : function() {
            return this.$store.getters.getPathPrefix() + 'password-login';
        },
        token : {
            get : function () { 
                return this.$store.getters.token;
             },
             set : function (val) {
                 this.$store.commit("setToken",val);
             }
        }
    },
    methods: {
        
        login(formData) {
            formData.account = formData.account.trim();
            this.$axios.post(this.loginByPasswordURL,this.$qs.stringify(formData))
            .then(response => {// 成功的返回
                    if(response.data.flg == true) {
                        this.$store.commit('setLoginStatus',true);
                        this.token = response.data.token;
                        
                        if(!this.loginCookie) {
                            this.$cookies.remove("token");
                        }

                        this.$message({
                            message : '登录成功!',
                            type : 'success'
                        });
                        this.$router.push(this.nextPage);
                    } else {
                        this.loginErr.msg = response.data.msg;
                        this.loginErr.flg = true;
                        this.$message.error('登录失败!');
                    }
                }).catch(err => {// 失败的返回
                    this.$message.error(err.message);
                }); 
        },
        cleanLoginErr() {
            this.loginErr.flg = false;
            this.loginErr.msg = "";
        },
        handleSubmit : function() {
                this.login(this.formInline);
            }
    },
    data() {
        return {
            loginCookie : false,
            loginErr : {
                flg : false,
                msg : ""
            },
            formInline : {
                    account: '',
                    passwd: ''
                },
            ruleInline: {
                account: [
                    { required: true, message: '请填写用户名', trigger: 'blur' }
                ],
                passwd: [
                    { required: true, message: '请填写密码', trigger: 'blur' }
                ]
            }
        }
    }
}
</script>
